<template>
  <div>
    <nav-bar title="VIP会员中心">
      <span slot="right" class="navbar_right" @click="showClick">购买记录</span>
    </nav-bar>
    <div class="content_scroll">
      <member-info :userinfo="userinfo" :vipInfo="vipInfo"/>
      <member-tab-control @item-click="itemClick" :vipInfo="vipInfo"/>
      <member-interests/>
      <member-explain/>
    </div>
    <member-button @btn-click="btnClick"/>
    <member-popup :isShow="isShow" @close-click="closeClick" :vipRecord="vipRecord"/>
  </div>
</template>

<script>
import NavBar from '../../components/common/navbar/NavBar.vue'
import MemberButton from './childComps/MemberButton.vue'
import MemberExplain from './childComps/MemberExplain.vue'
import MemberInfo from './childComps/MemberInfo.vue'
import MemberInterests from './childComps/MemberInterests.vue'
import MemberPopup from './childComps/MemberPopup.vue'
import MemberTabControl from './childComps/MemberTabControl.vue'
export default {
  components: { 
    NavBar, 
    MemberInfo,
    MemberInterests,
    MemberButton,
    MemberTabControl,
    MemberExplain,
    MemberPopup,
  },
  data() {
    return {
      isShow: false,
      userinfo: {},
      vipInfo: {},
      vipRecord: [],
      typeNum: null,
    }
  },
  created () {
    this.getVipInfo();
  },
  methods: {
    getVipInfo() {
      this.axios.get('/vip_center.json', {}).then(res => {
        this.vipInfo = res.data
        this.userinfo = res.data.user_community_data
        this.vipRecord = res.data.vip_record
      })
    },
    btnClick() {
      this.$router.push('/vip_pay_page/' + this.typeNum)
    },
     itemClick(item) {
      this.typeNum = item
    },
    showClick() {
      this.isShow = true
    },
    closeClick(e) {
      this.isShow = e
    },
  },
}
</script>

<style lang="less" scoped>
.navbar_right {
  font-size: .32rem;
  font-weight: 400;
  color: #222222;
}
</style>